<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:ic="http://ivyteam.ch/jsf/component"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:pm="http://primefaces.org/mobile">
      
  <cc:interface componentType="IvyComponent">
  </cc:interface>
  
  <cc:implementation>
	<style>
		.button {
			font-size: 12px !important;
		}
		.label{
			font-size: 15px !important;
		}
		.newTaskFormTable {
			margin-top: 10px;
			min-width: 100%;
		}
		.newTaskFormTable .labelColumn {
			width: 70px;
		}
		
		.newTaskFormTable .inputColumn input, .newTaskFormTable .inputColumn textarea {
			width: 100%;
		}
		
		.newTaskFormTable .controlColumn {
			text-align: right;
		}
		
		.newTaskFormTable td, .newTaskFormTable tr {
   			border-style: none !important;
   			vertical-align: top;
   			background: #444344 !important;
   			color: #FFFFFF
		}
		
		.btn-icon {
			width: 32px !important;
			height: 32px !important;
		}
	</style>

	<h:form>
		<p:commandButton id="newTaskButton" widgetVar="newTaskBtn" actionListener="#{logic.toggleNewTaskForm(true)}" value="New Task" update=":newTaskComponent:newTaskFormWrapper" styleClass="public-button"/>
		<p:hotkey bind="ctrl+n" actionListener="#{logic.toggleNewTaskForm(true)}" update=":newTaskComponent:newTaskFormWrapper"/>
	</h:form>
	<h:panelGroup id="newTaskFormWrapper">
		<h:form id="newTaskForm" rendered="#{data.isNewTaskFormShow}">		  
			<p:panelGrid styleClass="newTaskFormTable" >
				<p:row>
					<p:column styleClass="labelColumn" >
						<p:outputLabel for="taskTitle" value="Task title" ></p:outputLabel>
					</p:column>
					<p:column styleClass="inputColumn">
						<p:inputText id="taskTitle" value="#{data.task.title}" styleClass="inputtext"></p:inputText>
					</p:column>
					<p:column>
						<p:commandButton id="saveTaskButton" update=":newTaskComponent:newTaskFormWrapper"  styleClass="btn-icon" icon="ui-icon-plus"
						actionListener="#{logic.saveTask}" oncomplete="reloadData()" > </p:commandButton>
						<p:hotkey bind="ctrl+return" update=":newTaskComponent:newTaskFormWrapper" 
						actionListener="#{logic.saveTask}" oncomplete="reloadData()"/>
					</p:column>
				</p:row>
				<p:row>
					<p:column styleClass="labelColumn">
						<p:outputLabel for="taskDescription" value="Description"></p:outputLabel>
					</p:column>
					<p:column styleClass="inputColumn">
						<p:inputTextarea id="taskDescription" value="#{data.task.description}" rows="5" autoResize="false" styleClass="inputtext"></p:inputTextarea>
					</p:column>
					<p:column>
						<p:commandButton id="cancelButton" actionListener="#{logic.toggleNewTaskForm(false)}" update=":newTaskComponent:newTaskFormWrapper" styleClass="btn-icon" icon="ui-icon-close"></p:commandButton>
						<p:hotkey bind="esc" actionListener="#{logic.toggleNewTaskForm(false)}" update=":newTaskComponent:newTaskFormWrapper"/>
					</p:column>
				</p:row>
			</p:panelGrid>
		</h:form>
	</h:panelGroup>
  </cc:implementation>
  
</html> 